<template>
  <div class="groundInfo">
    <div class="pageHeader">
      球场信息
      <img src="@/static/images/arrow-left-fff.png" alt="" @click="back">
    </div>

    <div class="container">
      <div class="part01 ">
        <div class="item">
          <van-row style="width:100%">
            <van-col span="5" style="color:#8a8a8a">球场名称</van-col>
            <van-col span="19">{{courseData.club_info.name}}</van-col>
          </van-row>
        </div>
        <div class="item">
          <van-row style="width:100%">
            <van-col span="5" style="color:#8a8a8a">球场模式</van-col>
            <van-col span="19">{{courseData.club_info.mode}}</van-col>
          </van-row>
        </div>
        <div class="item">
          <van-row style="width:100%">
            <van-col span="5" style="color:#8a8a8a">建立时间</van-col>
            <van-col span="19">{{courseData.club_info.build_at}}</van-col>
          </van-row>
        </div>
        <div class="item">
          <van-row style="width:100%">
            <van-col span="5" style="color:#8a8a8a">设计师</van-col>
            <van-col span="19">{{courseData.club_info.designer}}</van-col>
          </van-row>
        </div>
        <div class="item">
          <van-row style="width:100%">
            <van-col span="5" style="color:#8a8a8a">球道长度</van-col>
            <van-col span="19">{{courseData.club_info.length}}码</van-col>
          </van-row>
        </div>
        <div class="item">
          <van-row style="width:100%">
            <van-col span="5" style="color:#8a8a8a">果岭草种</van-col>
            <van-col span="19">{{courseData.club_info.green}}</van-col>
          </van-row>
        </div>
        <div class="item">
          <van-row style="width:100%">
            <van-col span="5" style="color:#8a8a8a">球道草种</van-col>
            <van-col span="19">{{courseData.club_info.fairway}}</van-col>
          </van-row>
        </div>
      </div>
      <div class="part02">
        <div class="item">
          <van-row style="width:100%">
            <van-col span="5" style="color:#8a8a8a">球场数据</van-col>
            <van-col span="19">18洞</van-col>
          </van-row>
          <van-icon class="icon" name="arrow" size="16" />
        </div>
        <div class="item">
          <van-row style="width:100%">
            <van-col span="5" style="color:#8a8a8a">球会地址</van-col>
            <van-col span="19">{{courseData.club_info.address}}</van-col>
          </van-row>
          <!-- <van-icon class="icon" name="arrow" size="16" /> -->
        </div>
        <a :href="'tel:'+courseData.club_info.phone" class="item">
          <van-row style="width:100%">
            <van-col span="5" style="color:#8a8a8a">球会电话</van-col>
            <van-col span="19" style="color:#010101">{{courseData.club_info.phone}}</van-col>
          </van-row>
          <van-icon class="icon" name="arrow" size="16" />
        </a>
        <div class="item">
          <van-row style="width:100%">
            <van-col span="5" style="color:#8a8a8a">球场介绍</van-col>
            <van-col span="19" style="line-height:16px;margin-top:-2px;">{{courseData.club_info.facilities}}</van-col>
          </van-row>
          <!-- <van-icon class="icon" name="arrow" size="16" /> -->
        </div>
      </div>
    </div>

    <!-- <div class="groundTitle"><van-icon name="bookmark" size="18" color="#2d8aea" />球场数据</div>
    <div class="groundContent">{{courseData.courtdata}}</div>

    <div class="groundTitle"><van-icon name="bookmark" size="18" color="#2d8aea" />球场介绍</div>
    <div class="groundContent">{{courseData.introduce}}</div>

    <div class="groundTitle"><van-icon name="bookmark" size="18" color="#2d8aea" />服务项目</div>
    <div class="groundContent">{{courseData.services}}</div>

    <div class="groundTitle"><van-icon name="bookmark" size="18" color="#2d8aea" />行车路线</div>
    <div class="groundContent">{{courseData.route}}</div> -->
  </div>
</template>

<style scoped>
  .container .part01{
    padding: 20px;
    background-color: #ffffff;
    font-size: 26px;
  }
  .container .part01 .item{
    margin-bottom: 20px;
  }
  .container .part01 .item:last-of-type{
    margin-bottom: 0;
  }
  .container .part02 {
    overflow: hidden;
    font-size: 26px;
  }
  .container .part02 .item{
    padding: 30px 20px;
    background-color: #ffffff;
    margin-top: 20px;
    position: relative;
    display: block;
  }
  .container .part02 .item .icon{
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
  .groundInfo{
    min-height: 100vh;
    background-color: #f2f3f5;
  }
  .pageHeader{
    color: #ffffff;
    background-color: #468ae3;
  }

  .groundTitle , .groundContent {
    text-align: left;
    font-size: 28px;
    background: #ffffff;
  }

  .groundTitle {
    display: flex;
    align-items: center;
    padding: 32px;
  }

  .groundTitle img {
    display: block;
    width: 32px;
    height: 32px;
  }

  .groundContent {
    text-indent: 64px;
    line-height: 2;
    padding: 0 32px 32px 32px;
  }
</style>

<script>
import api from 'api'
import { Toast } from 'vant'

export default {
  data() {
    return {
      courseData:{
        club_info:{}
      }
    }
  },
  activated() {
    if(!this.courseData.id){
      this.getData()
    }
  },
  methods: {
    getData(){
      Toast.loading({
        message:"加载中...",
        duration:0
      })
      let courseid = this.$route.params.id
      api.get("/course/courseinfo",{courseid}).then(e=>{
        Toast.clear()
        this.courseData = e.data
      })
    },
    back(){
      this.$router.go(-1);//返回上一层
    },
  },
  computed:{
    
  }
}
</script>